<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
      style="width: 160px;"
    >
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-card-statistic"
        >
          <div
            class="ant-pro-card-statistic-wrapper"
          >
            <div
              class="ant-pro-card-statistic-content"
            >
              <div
                class="ant-statistic ant-pro-card-statistic-layout-inline ant-pro-card-statistic-trend-up"
              >
                <div
                  class="ant-statistic-title"
                >
                  Daily Comparison
                </div>
                <div
                  class="ant-statistic-content"
                >
                  <span
                    class="ant-statistic-content-prefix"
                  >
                    <div
                      class="ant-pro-card-statistic-trend-icon ant-pro-card-statistic-trend-icon-up"
                    />
                  </span>
                  <span
                    class="ant-statistic-content-value"
                  >
                    7.60%
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-statistic"
        >
          <div
            class="ant-pro-card-statistic-wrapper"
          >
            <div
              class="ant-pro-card-statistic-content"
            >
              <div
                class="ant-statistic ant-pro-card-statistic-layout-inline ant-pro-card-statistic-trend-down"
              >
                <div
                  class="ant-statistic-title"
                >
                  Weekly Comparison
                </div>
                <div
                  class="ant-statistic-content"
                >
                  <span
                    class="ant-statistic-content-prefix"
                  >
                    <div
                      class="ant-pro-card-statistic-trend-icon ant-pro-card-statistic-trend-icon-down"
                    />
                  </span>
                  <span
                    class="ant-statistic-content-value"
                  >
                    7.60%
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-statistic"
        >
          <div
            class="ant-pro-card-statistic-wrapper"
          >
            <div
              class="ant-pro-card-statistic-content"
            >
              <div
                class="ant-statistic ant-pro-card-statistic-layout-inline"
              >
                <div
                  class="ant-statistic-title"
                >
                  Weekly Comparison
                </div>
                <div
                  class="ant-statistic-content"
                >
                  <span
                    class="ant-statistic-content-value"
                  >
                    0.00%
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        StatisticCard Trend Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 统计项标题
        </li>
        <li>
          <strong>
            value
          </strong>
          : 统计数值
        </li>
        <li>
          <strong>
            trend
          </strong>
          : 趋势指示，可选值：'up' | 'down' | undefined
        </li>
      </ul>
      <h4>
        Trend 属性说明：
      </h4>
      <ul>
        <li>
          <strong>
            up
          </strong>
          : 上升趋势，显示绿色上升箭头
        </li>
        <li>
          <strong>
            down
          </strong>
          : 下降趋势，显示红色下降箭头
        </li>
        <li>
          <strong>
            undefined
          </strong>
          : 无趋势，不显示箭头
        </li>
      </ul>
      <h4>
        趋势显示特点：
      </h4>
      <ul>
        <li>
          <strong>
            颜色区分
          </strong>
          : 上升趋势为绿色，下降趋势为红色
        </li>
        <li>
          <strong>
            箭头指示
          </strong>
          : 使用箭头图标直观显示趋势方向
        </li>
        <li>
          <strong>
            数值对比
          </strong>
          : 结合数值变化展示趋势信息
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            数据对比
          </strong>
          : 展示同比、环比等数据变化趋势
        </li>
        <li>
          <strong>
            指标监控
          </strong>
          : 监控关键业务指标的变化趋势
        </li>
        <li>
          <strong>
            报表分析
          </strong>
          : 在报表中展示数据趋势分析
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>